import React, { Component } from 'react'

import { Route, Link, NavLink, Switch, withRouter, useLocation } from 'react-router-dom'
// import同步编译，中间不能加语句
import './style.css'

class About extends Component {
  render() {
    return (
      <div>about</div>
    )
  }
  componentDidMount() {
    console.log(this.props)
  }
}

// const Home = (props) => (<div>Home{props.match.path}</div>)
const Home = () => (<div>home</div>)
// const Home = withRouter(() => (<div>Home</div>))

// const About = () => (<div>about</div>)
// const DashBord = () => (<div>dashbord</div>)
// const DashBord = (props) => (<div>dashbord{props.match.path}</div>)

class DashBord extends Component {
  render() {
    return (
      <div>dashbord</div>
    )
  }
  componentDidMount() {
    console.log(this.props)
  }
}

const Profile = () => {
  let location = useLocation()
  return (<div>Profile</div>)
}

@withRouter
class MyNavLink extends Component {
  state = {
    navlist: [
      {id: '001', name: 'home'},
      {id: '002', name: 'about'},
      {id: '003', name: 'dashbord'},
      {id: '004', name: 'profile'}
    ] 
  }
  handleClick = (path) => {
    let history = this.props.history
    return (e) => {
      console.log(path)
      history.push('/' + path) // 路由导航可返回之前的状态
    }
  }
  render() {
    console.log(this.props)
    let pathname = this.props.location.pathname
    return (
      <>
        {
          this.state.navlist.map(value => {
            let { id, name } = value
            // return true ? <li key={id}>&gt;{name}</li> : <li key={id}>{name}</li>
            return (
                <li key={id}
                  onClick={this.handleClick(name)}
                >{pathname === '/' + name ? '>':''} {name}</li>
              )
          })
        }
      </>
    )
  }
}

@withRouter
class CustomLink extends Component {
  render() {
    return (
      <>
        <ul>
          <MyNavLink></MyNavLink>
          {/* <MyNavLink {...this.props} 这里没有props，使用withRouter></MyNavLink> */}
          {/* <li><NavLink exact to="/" activeClassName="selected">Home</NavLink></li>
          <li><NavLink to="/about" activeClassName="selected">About</NavLink></li>
          <li><NavLink to="/dashbord" activeClassName="selected">DashBord</NavLink></li>
          <li><NavLink to="/profile" activeClassName="selected">Profile</NavLink></li> */}
        </ul>
        {/* 加了switch children 不能每个都渲染 */}
        <Switch>
          {/* component接收一个组件/函数，不能传组件实例component={<Home></Home>}；render只能传函数/函数式组件render={Home}，没有props，需要加入，不能传组件/类render={About}*/}
          <Route path="/home" exact component={()=><Home></Home>}></Route>
          {/* <Route path="/" component={()=><Home></Home>}></Route> 写后面 */}
          {/* <Route path="/about" render={()=><About></About>}></Route> */}
          <Route path="/about" render={(props)=><About {...props}></About>}></Route>
          {/* <Route path="/dashbord" component={DashBord}></Route> */}
          {/* <Route path="/dashbord" children={DashBord}></Route> */}
          <Route path="/dashbord" children={(props)=><DashBord {...props}></DashBord>}></Route>
          {/* <DashBord></DashBord> */}
          <Route path="/profile">
            <Profile></Profile>
          </Route>
        </Switch>
      </>
    )
  }
}

export default CustomLink